<script setup lang="ts">
import { reactive, watch } from 'vue'

const props = defineProps({
  list: {
    type: Array,
    default: () => []
  },
  option: {
    type: Object,
    default: () => {}
  },
  modelValue: {
    type: [String, Number, Boolean],
    default: false
  },
  text: {
    type: String,
    default: () => ''
  },
  sty: {
    type: String,
    default: () => '1'
  },
  oneSetStyle: {
    type: String,
    default: () => '40'
  }
})

const emit = defineEmits(['update:modelValue'])

const state = reactive({
  data: props.list as any,
  inputValue: props.modelValue ? props.modelValue : ''
})

const change = () => {
  emit('update:modelValue', state.inputValue)
}

watch(
  () => props.modelValue,
  (val: any) => {
    state.inputValue = val
  }
)
</script>

<template>
  <div class="oneSet" :style="props.oneSetStyle">
    <span :class="props.sty == '1' ? 'setName w47' : 'setName  m38'">{{ props.text }}</span>
    <FRadio :list="props.list" :option="props.option" v-model="state.inputValue" @change="change" />
  </div>
</template>

<style lang="scss" scoped></style>
